<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/sockjs.min.js"></script>
    <script src="lib/stomp.js"></script>
    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/common.js"></script>
    <style>
        .divcss5 {
            word-wrap: break-word;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var stompClient = null;
        $(function () {
            $("#b_Info").click(function () {
                connect();
            });
            $("#a_Info").click(function () {
                disconnect();
            });
            $("#c_Info").click(function () {
                sendName();
            });
            $("#s_Info").click(function () {
                $.ajax({
                    type: "POST",
                    url: config.contextUrl + "login",
                    data: $("#loginForm").serialize(),
                    success: function (msg) {
                        if (msg.success) {
                            //alert("Data Saved: " + msg.data);
                            console.log(msg.data);
                            config.token = msg.data;
                            $("#tokenDiv").html(msg.data);
                        }
                    }
                });
            });
            $("#say").click(function () {
                say();
            });
        })
        function connect() {
            var socket = new SockJS(config.socketUrl + 'sockJs');
            stompClient = Stomp.over(socket);
            stompClient.connect({"token": config.token}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function (greeting) {
                    //alert(JSON.parse(greeting.body));
                    //showResponse(JSON.parse(greeting.body).data);
                    $("#sayDiv").append("<br>" + JSON.parse(greeting.body).msg + "</br>");
                });
            });
        }
        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            console.log('Disconnected');
        }
        function sendName() {
            console.log('send');
            stompClient.send("/ws/hello", {}, JSON.stringify({'username': 'admin', 'password': '123456'}));
        }
        function showResponse(message) {
            $("#tokenDiv").html(message);
        }
        function say() {
            var msg = $("#sayMsg").val();
            console.log(msg);
            stompClient.send("/ws/hello", {}, msg);
        }
    </script>
</head>

<body onload="disconnect()">
<form id="loginForm">
    <table>
        <tr>
            <td>username:</td>
            <td><input id="username" name="username" type="text" value="admin"/></td>
        </tr>
        <tr>
            <td>password:</td>
            <td><input id="password" name="password" type="password" value="111111"/></td>
        </tr>
    </table>
</form>
<input id="s_Info" type="button" value="Info"/>
<input id="b_Info" type="button" value="connect"/>
<input id="a_Info" type="button" value="disconnect"/>
<input id="c_Info" type="button" value="send"/>
<div id="tokenDiv" class="divcss5"></div>
<input id="sayMsg" type="text">
<input type="button" id="say" value="say">
<div id="sayDiv" class="divcss5"></div>
</body>

</html>